<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sign In and Sign Out Form</title>
</head>
<body>
    <h2>Sign In and Sign Out Form</h2>
    <form action="#" method="post">
        <label for="username">Username:</label><br>
        <input type="text" id="username" name="username" required><br><br>

        <label for="signin_time">Sign In Time:</label><br>
        <input type="datetime-local" id="signin_time" name="signin_time" required><br><br>

        <label for="signout_time">Sign Out Time:</label><br>
        <input type="datetime-local" id="signout_time" name="signout_time" required><br><br>

        <label for="duration_hours">Duration (Hours):</label><br>
        <input type="text" id="duration_hours" name="duration_hours" readonly><br><br>

        <label for="duration_minutes">Duration (Minutes):</label><br>
        <input type="text" id="duration_minutes" name="duration_minutes" readonly><br><br>

        <input type="submit" value="Submit">
    </form>

    <script>
        // Calculate duration when signout_time changes
        document.getElementById("signout_time").addEventListener("change", function() {
            var signinTime = new Date(document.getElementById("signin_time").value);
            var signoutTime = new Date(this.value);
            var duration = (signoutTime - signinTime) / (1000 * 60); // Duration in minutes

            var hours = Math.floor(duration / 60);
            var minutes = duration % 60;

            document.getElementById("duration_hours").value = hours;
            document.getElementById("duration_minutes").value = minutes;
        });
    </script>
</body>
</html>